<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }
    </style>
    <script src="./jquery-1.8.3.min.js"></script>
    <script>
        $(function(){
            var box = document.getElementById('box'); //JSDOM
            var $box = $('#box'); // JQDOM

            console.log('JS DOM: ' + box);
            console.log(box);
            console.log('JQ DOM: ' + $box);
            console.log($box);

            box.style.backgroundColor = '#ccc';
            // $box.style.backgroundColor = '#369'; // NO
            // box.css('background-color', '#963'); // NO
            $box.css('background-color', '#963');

            $('img').attr('width', 500);
            // $('img').width = 800;  // NO

            // 转化
            // JSDOM   ->>>   JQDOM
            $(box).css('background-color', '#369');

            // JQDOM   ->>>   JSDOM
            console.log('jqdom 集合长度:'+ $box.length);
            console.log($box[0]);
            $box[0].style.backgroundColor = '#f00';

            console.log($('h1').length);
            console.log($('h1')[4]);
        });
    </script>
</head>
<body>
    <h1>Jquery1</h1>
    <h1>Jquery2</h1>
    <h1>Jquery3</h1>
    <h1>Jquery4</h1>
    <h1>Jquery5</h1>
    <h1>Jquery6</h1>
    <hr>
    <div id="box"></div>

    <hr>
    <img src="./imgs/1.jpg" width="50">

    
</body>
</html>